<template>
  <div class="cs-page-container">
    <div class="cs-filter-container">
      <el-button type="primary" size="small" icon="el-icon-edit" @click="onAdd()">添加</el-button>
    </div>
    <div class="cs-filter-result">
      <el-table
        v-loading="listLoading"
        :data="list"
        :height="'calc(100vh - 300px)'"
        border
        fit
        size="small"
        highlight-current-row
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
      >

        <el-table-column
          align="center"
          label="id"
        >

          <template slot-scope="{ row }">
            {{ row.id }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段名"
        >

          <template slot-scope="{ row }">
            {{ row.fieldName }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="字段描述"
        >

          <template slot-scope="{ row }">
            {{ row.desc }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="依赖字段"
        >
          <template slot-scope="{ row }">
            {{ row.relyOn | relyOnDisplay }}
          </template>

        </el-table-column>
        <el-table-column
          align="center"
          label="查询语句"
        >

          <template slot-scope="{ row }">
            {{ row.query }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          fixed="right"
          width="160"
        >
          <template slot-scope="{row}">
            <el-button
              type="primary"
              size="mini"
              @click="onUpdate(row)"
            >编辑</el-button>
            <el-button
              type="danger"
              size="mini"
              @click="onDelete(row)"
            >删除</el-button>
          </template>
        </el-table-column>

      </el-table>
      <DisplayFieldEditor
        :visible.sync="editVisible"
        :value="tempDisplayField"
        @success="addOrUpdateField"
      ></DisplayFieldEditor>

    </div>

  </div>
</template>

<script>
import {
  displayFieldList, deleteDisplayField,
  addDisplayField, updateDisplayField, preUpdateDisplayField
  // addAtomField,
  // updateAtomField,
  // deleteAtomField
} from '@/api/bx';
import DisplayFieldEditor from './components/displayFieldEditor';

export default {
  name: 'DisplayFieldList',
  components: { DisplayFieldEditor },
  filters: {
    relyOnDisplay(relyOn) {
      console.log(relyOn)
      if (relyOn) {
        const fields = []
        relyOn.forEach(item => {
          fields.push(item.desc || item.fieldName)
        })
        return fields.join(',')
      }
    }
  },
  data() {
    return {
      list: [],
      listLoading: true,
      editVisible: false,
      tempDisplayField: {}
    }
  },
  created() {
    this.doSearch()
  },
  methods: {
    doSearch() {
      displayFieldList().then(resp => {
        this.list = resp.data.list
        this.listLoading = false
      })
    },

    onAdd() {
      this.tempDisplayField = {
        fieldName: '',
        desc: '',
        query: '',
        relyOn: []
      }
      this.editVisible = true
    },

    onUpdate(row) {
      this.tempDisplayField = Object.assign({}, row)
      this.editVisible = true
    },

    onDelete(row) {
      deleteDisplayField(row.id).then(resp => {
        this.doSearch()
      })
    },
    addOrUpdateField(field) {
      this.editVisible = false
      if (field.id) {
        preUpdateDisplayField(field).then(resp => {
          if (resp.data.msg) {
            this.$confirm(resp.data.msg + ', 是否修改?').then(() => {
              updateDisplayField(field).then(resp => {
                this.doSearch()
              })
            })
          } else {
            updateDisplayField(field).then(resp => {
              this.doSearch()
            })
          }
        })

        updateDisplayField(field).then(resp => {
          this.doSearch()
        })
      } else {
        addDisplayField(field).then(resp => {
          this.doSearch()
        })
      }
    }
  }
}
</script>

<style scoped>

</style>
